<template>
  <div>
    <el-container>
      <el-header>
        <head-item></head-item>
      </el-header>
      <el-main>
        <el-row class="main" type="flex" justify="space-around">
          <el-col :span="16">
            <div id="artcle-info" style="  text-align: center;">
              <h2 class="blog-title"><strong>{{ this.blog.title }}</strong></h2>
              <!-- 描述：文章信息 -->
              <div class="text-center timeAndView">
            <span class="article-time">
              <i class="el-icon-time"/>
              发表于：<span>{{ this.blog.created }}</span>
            </span>
                &nbsp;|&nbsp;
                <span class="article-views">
              <i class="el-icon-view"/>
              阅读量：<span>{{ this.blog.views }}</span>
            </span>
              </div>
              <p class="abstract">
                前言：{{ this.blog.description }}
              </p>
            </div>

            <MDViews></MDViews>

          </el-col>
        </el-row>
      </el-main>
    </el-container>
    <foot-item></foot-item>
  </div>
</template>

<script>

import HeadItem from "@/components/head-item";
import FootItem from "@/components/foot-item";
import MDViews from "@/components/MDViews";

export default {
  name: "blog",
  components: {FootItem, HeadItem, MDViews,},
  data() {
    return {
      blog: {},
      content: '',
    }
  },
  methods: {
    initBlog() {
      this.blog = JSON.parse(window.sessionStorage.getItem("thisBlog"))
    },
  },
  created() {
    this.initBlog()
  },
}
</script>

<style scoped>
/*@import url('../assets/css/typora.css');*/
.blog-title {
  color: whitesmoke;
  font-size: larger;
}

#artcle-info {
  padding: 20px;
  background: #353e4a;
  margin-bottom: 40px;
}

/*引用样式*/
#artcle-info .abstract {
  color: #ffffff;
  border-left: 3px solid #F56C6C;
  padding: 10px;
  background-color: rgba(126, 129, 135, 0.3);
  text-align: left;
}

#artcle-info .timeAndView {
  padding: 20px;
  line-height: 30px;
  font-size: 16px;
  color: #ffffff;
}

pre.has {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.8);
}

img.has {
  width: 100%;
}

#statement {
  border-left: 3px solid #F56C6C;
  padding: 20px;
  background-color: #EBEEF5;
}
</style>